<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Evernote</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">		
</head>
<body>
	<div class="left">
		<div class="logo">
			<img alt="logo" src="img/logo.png">
		</div>
		<div class="btn">
			<a id="left_newnote" title="新建笔记">
				<img class="img1" id="img1" alt="新建笔记" src="img/newnotes.png" onmouseover="imgHover()" onmouseout="imgUnhover()" onclick="imgOnClick()">
			</a>
		</div>
		<div class="btn">
			<a title="搜索笔记">
				<img class="img1" id="img2" alt="搜索笔记" src="img/search.png" onmouseover="imgHover()" onmouseout="imgUnhover()" onclick="imgOnClick()">
			</a>
		</div>
		<div id="left_note" class="btn1">
			<a title="笔记">
				<img class="img2" id="img3" alt="搜索笔记" src="img/note2.png" onmouseover="imgHover()" onmouseout="imgUnhover()" onclick="imgOnClick()">
			</a>
		</div>
		<div id="left_notebook" class="btn">
			<a title="笔记本">
				<img class="img2" id="img4" alt="搜索笔记" src="img/notebook.png" onmouseover="imgHover()" onmouseout="imgUnhover()" onclick="imgOnClick()">
			</a>
		</div>
		<div class="user">
			<a class="user_a" title="账户">
				<img src="img/user.png">
			</a>
		</div>
	</div>
	<div class="centre">
		<div class="head">
			<h2></h2>
			<div>
				<span id = "noteNum">条笔记</span>
				<a onclick="toIndex()">所有笔记</a>
			</div>
		</div>
		<div id="content" class="content">
			<c:forEach items="" var="c" varStatus="status">
				<div id = "note_id" class="note" onclick="onClick('')">
					<span class="title"</span>
					<a title="删除" href="" onclick="deleteNote('')"><img class="delete" alt="" src="img/delete_white.png"></a>
					<span class="date"></span>
					<span id = "content_span" class="text"></span>
					<input id = "" type="text" value="" style="visibility: hidden;">
					<input id = "" type="text" value="" style="visibility: hidden;">
					<input id = "" type="text" value="" style="visibility: hidden;">
				</div>
			</c:forEach>
		</div>
	</div>
	<div class="right">
		<div class="position">
			<div class="head">
				<input id = "right_Cid" type="text" value = "0" style="display: none;">
				<input id = "right_Nid" type="text" value = "" style="display: none;">
				<input id = "right_Uid" type="text" value = "" style="display: none;">
				<a onclick="getContent()">提交</a>
			</div>
			<div class="toolbar_title">
				<a id="movenote" title="移动笔记">
					<img alt="" src="img/notebook_small.png">
					<span id="notebook_name"></span>
					<img alt="" src="img/downArrow.png">
				</a>
				<!-- 弹窗2 -->
				<div class="notebookOption">
					<div class="head">
						<input class="text" type="text" placeholder="查找笔记本">
					</div>
					<div class="middle">
						<div>
							<a class="newnotebook_a" id="newnotebook_a" onmouseover="imgHover()" onmouseout="imgUnhover()">
								<img class="newnotebook_img" id="newnotebook_img" alt="" src="img/newnotebook.png">
								<span id="newnotebook_span" onmouseover="imgHover()" onmouseout="imgUnhover()">创建新笔记本</span>
							</a>
						</div>
						<c:forEach items="${nlist }" var="n">
							<div id="notebookName" class="notebookName" onclick="changeNotebook('')" onmouseover="imgHover()" onmouseout="imgUnhover()">
								<input id = "" type="text" value = "" style="display: none;">
								<span id = "" onmouseover="imgHover()" onmouseout="imgUnhover()"></span>
								<img id = "" alt="" src="" onmouseover="imgHover()" onmouseout="imgUnhover()">
							</div>
						</c:forEach>
					</div>
				</div>
			</div>
			
			<!-- <div id = "editor"></div> -->
			<div id="text_toolbar" class="text_toolbar"></div>
			<div class="title">
				<input id="title_input" type="text" placeholder="写下笔记标题" >
			</div>
			<div id="text" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->		        
		    </div>
		</div>
	</div>
	
	<!-- 弹窗1 -->
	<div class="userinfo">
		<div class="position">
			<div>
				<input class="btn" type="button" value="探索更多选择">
			</div>
			<div>
				<a href="">
					<img title="换一张照片" class="user_pportrait" alt="" src="img/user.png">
				</a>
				<span class="username"></span>
			</div>
			<div class="option">
				<a href="">
					<img alt="" src="img/set.png">
					<span>设置</span>
				</a>
				<a href="">
					<img alt="" src="img/download.png">
					<span>下载 Windows版</span>
				</a>
				<a href="">
					<img alt="" src="img/guide.png">
					<span>使用指南</span>
				</a>
				<a href="">
					<img alt="" src="img/feedback.png">
					<span>使用反馈</span>
				</a>
				<a href="#" onclick="window.location = 'ToLogin'">
					<img alt="" src="img/exit.png">
					<span>退出登陆</span>
				</a>
			</div>
		</div>
	</div>
	<!-- 弹窗3 -->
	<div class="newnotebook">
		<div class="position">
			<input id = "newnotebook_id" type="text" value = "" style="display: none;">
			<img alt="" src="img/newnotebook_gray.png">
			<span>创建笔记本</span>
			<hr style="width: 20%; display: block; margin: 0 auto; color: rgb(163,163,163); cursor: default;">
			<input id="newnotebook_input" type="text" placeholder="给笔记本起个名称">
			<a class="cancel"><span>取消</span></a>
			<a class="create" onclick="newNotebook()"><span>创建笔记本</span></a>
		</div>
	</div>
	
	<!-- 弹窗4 -->
	<div class="notebook">
		<div class="head">
			<div>
				<span>笔记本</span>
				<img title="创建笔记本" id="newnotebook" alt="" src="img/newnotebook.png">
			</div>
			<input class="text" type="text" placeholder="查找笔记本">
		</div>
		<div class="middle">
			<div>
				<div id="notebookName" class="notebookName" onclick="selectNotebook('')" onmouseover="imgHover()" onmouseout="imgUnhover()">
					<input id = "notebookName_Nid" type="text" value = "" style="display: none;">
					<span id = "notebookName_span" onmouseover="imgHover()" onmouseout="imgUnhover()"></span>
					<span>条笔记</span>
				</div>
				<a title="删除" href="" onclick="delectNotebook()">
					<img id="delete_img" onmouseover="imgHover('')" onmouseout="imgUnhover('')" class="delete" alt="" src="img/delete_white.png">
				</a>
			</div>
		</div>
	</div>		
</body>	
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/wangEditor.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</html>